<template>
  <view class="ycy-tab-bar">
    <up-tabbar :value="activeIndex" @change="handleChange" activeColor="#125796" inactiveColor="#adadad" :border="false" :safeAreaInsetBottom="false">
      <up-tabbar-item v-for="(item, index) in itemList" :key="index" :text="item.label">
        <template #active-icon>
          <view :class="activeIndex === index ? 'zoomAnimationClass' : ''">
            <up-icon :name="item.activeIcon" color="#125796" size="32" />
            <!-- <image class="u-page__item__slot-icon" src="@/static/image/car_insurance_active.png" mode="aspectFit"></image> -->
          </view>
        </template>
        <template #inactive-icon>
          <up-icon :name="item.inactiveIcon" color="#adadad" size="32" />
          <!-- <image class="u-page__item__slot-icon" src="@/static/image/car_insurance.png" mode="aspectFit"></image> -->
        </template>
      </up-tabbar-item>
    </up-tabbar>
  </view>
</template>

<script setup>
  import { ref } from 'vue';

  const props = defineProps({
    activeIndex: {
      type: Number,
      default: 0,
      require: true
    }
  });
  const emits = defineEmits(['update:activeIndex']);

  const handleChange = name => {
    emits('update:activeIndex', name);
  };

  const itemList = [
    {
      label: '首页',
      activeIcon: 'home-fill',
      inactiveIcon: 'home'
    },
    {
      label: '门店',
      activeIcon: 'map-fill',
      inactiveIcon: 'map'
    },
    {
      label: '服务',
      activeIcon: 'list', //grid
      inactiveIcon: 'list' //grid-fill
    },
    {
      label: '我的',
      activeIcon: 'account-fill',
      inactiveIcon: 'account'
    }
  ];
</script>

<style lang="scss" scoped>
  .ycy-tab-bar {
  }

  .u-page__item__slot-icon {
    width: 26px;
    height: 26px;
  }
</style>
